<template>
  <div>
    <div class="searchDiv">
      <div class="inputDiv">
        <el-form ref="searchForm" :inline="true" :model="formInline" class="demo-form-inline">
          <el-form-item label="编号" prop="area">
            <el-input v-model="formInline.area" placeholder="请选择商业区" />
          </el-form-item>
          <el-form-item label="使用转态" prop="name">
            <el-input v-model="formInline.name" placeholder="请输入楼栋名" />
          </el-form-item>
          <el-form-item label="客户姓名" prop="number">
            <el-input v-model="formInline.number" placeholder="请输入编号" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">
              <el-icon style="margin-right:5px">
                <Search />
              </el-icon>查询
            </el-button>
            <el-button @click="reSeting">
              <el-icon style="margin-right:5px">
                <Refresh />
              </el-icon>重置
            </el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <!-- 租赁合同表格 -->
    <div class="tableDiv" style="height:465px;background:#fff">
      <div class="addButton">
        <el-button type="primary">+ 新增</el-button>
      </div>
      <el-table :data="tableData" border style="width: 100%;height: 360px;">
        <el-table-column prop="num" label="序号" width="70" />
        <el-table-column prop="cid" label="商铺编号" />
        <el-table-column prop="enable" label="使用状态" />
        <el-table-column prop="gsiname" label="公司名" />
        <el-table-column prop="firstname" label="姓名"  />
        <el-table-column prop="phone" label="电话" />
        <el-table-column prop="money" label="租金"  />
        <el-table-column prop="work" label="行业"  />
        <el-table-column prop="startTime" label="开始时间"  />
        <el-table-column prop="endingTime" label="结束时间"  />
        <el-table-column label="操作" style="diaplay:flex;align-items: center;flex-wrap: nowrap;" width="200px">
          <template #default="score">
            <el-button disabled text size="small">发起合同</el-button>
            <el-button type="primary" text size="small" @click="changeContarct(score.row.cid)">编辑合同</el-button>
            <el-button type="primary" text size="small">撤销合同</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div style="margin-top:20px;float:right;">
        <el-pagination layout="total, sizes, prev, pager, next, jumper" background :total="total" :current-page="page"
          :page-size="pageSize" @size-change="sizeChange" @current-change="pageChange" />
      </div>
    </div>
  </div>
  <el-dialog @close="() => { $store.commit('base/LING_NUM') }" v-model="dialogVisible1" align-center="true" style="overflow:hidden" title="合同信息" :width="600">
    <dialog-page  :form1="ruleForm1" :form2="userForm1" :getmoney="getMoney"></dialog-page>
  </el-dialog>
</template>

<script>
import { getContract, getstoreDetail, getUserDatail, getMoneyxmu } from '@/api/contract'
import DialogPage from '@/views/ContractMsg/components/DialogPage.vue'
export default {
  name: 'ContractMsg',
  components: {
    DialogPage
  },
  data () {
    return {
      active: 0,
      tableData: [],
      page: 1,
      pageSize: 10,
      total: 0,
      dialogVisible1: false,
      ruleForm1: {
        quming: '',
        cid: 0,
        type: '',
        startTime: ''
      },
      userForm1: {
        gsiming: '',
        name: '',
        cart: '',
        sex: '',
        phone: '',
        hanye: ''
      },
      formInline: {
        area: '',
        name: '',
        number: ''
      },
      getMoney: []
    }
  },
  methods: {
    // 点击编辑按钮时，获取编辑按钮三个步骤所需要的初始化信息
    changeContarct (id) {
      this.dialogVisible1 = true
      getstoreDetail({ id }).then((res) => {
        if (res.data.code === 200) {
          console.log(res.data.data)
          this.ruleForm1 = res.data.data
          console.log(this.ruleForm1)
        }
      })
      getUserDatail({ id }).then((res) => {
        if (res.data.code === 200) {
          console.log(res.data.data)
          this.userForm1 = res.data.data
          console.log(this.userForm1)
        }
      })
      getMoneyxmu().then(res => {
        if (res.data.code === 200) {
          this.getMoney = res.data.data.list
        }
      })
    },
    // deleInfo (cid) {
    //   deteleTower({
    //     cid
    //   }).then((res) => {
    //     if (res.data.code === 200) {
    //       this.$message({
    //         type: 'success',
    //         message: res.data.msg,
    //         duration: 2000,
    //         onclose () {
    //           this.$router.go(0)
    //         }
    //       })
    //     }
    //   })
    // },
    // onSubmit () {
    //   this.initTable()
    // },
    reSeting () {
      // console.log(this.$refs.searchForm)
      const from1 = this.$refs.searchForm
      console.log(from1)
      from1.resetFields()
    },
    sizeChange (size) {
      console.log(size)
      this.pageSize = size
      this.initTable()
    },
    pageChange (page) {
      // this.$router.go(0)
      console.log(page)
      this.page = page
      this.initTable()
    },
    // 初始化租赁合同表格
    initTable () {
      getContract({
        page: this.page,
        pageSize: this.pageSize,
        ...this.formInline
      }).then((res) => {
        console.log(res)
        if (res.data.code === 200) {
          this.tableData = res.data.data.list
          this.total = res.data.data.total
          this.formInline.area = ''
          this.formInline.name = ''
          this.formInline.number = ''
        }
      })
    }
  },
  created () {
    this.initTable()
    console.log(this.page)
  }
}
</script>

<style lang="scss" scoped>
:deep(.el-main) {
  --el-main-padding: 9px;
}

:deep(.el-form-item>.el-form-item__label) {
  width: 69px;
}

:deep(.el-form--inline .el-form-item__content) {
  width: 185px;
}

.searchDiv {
  // height: auto;
  overflow: auto;

  .inputDiv {
    // height: 42px;
    background: #fff;
    margin-bottom: 10px;
    padding: 15px 10px 0;
    box-sizing: border-box;
  }

}

.el-button.is-text {
  width: 43px;
}
.el-dialog {
  overflow: hidden;
  :deep(.el-dialog__body) {
      padding: 8px;
    }
}

:deep(.el-dialog__footer) {
  text-align: center;
}
:deep(.el-dialog>.el-input) {
  width: 400px;
}

:deep(.el-textarea__inner) {
  height: 96px;
  resize: none;
}

:deep(.el-input__wrapper) {
  width: 400px;
  border-radius: 4px;
  // border: 1px solid #dcdfe6;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  color: #606266;
  height: 36px;
  line-height: 36px;
  padding-right: 30px;
}

:deep(.el-form-item__label) {
  font-size: 14px;
  color: #606266;
  width: 100px;
  font-weight: 700;
}

:deep(.el-dialog__header) {
  border-bottom: 1px solid #dcdfe6;
  padding: 0 20px;
  height: 56px;
  line-height: 56px;
}

:deep(.el-table .el-table__header-wrapper th) {
  background-color: #f8f8f9;
  color: #515a6e;
  text-align: center;
}

:deep(.el-table--enable-row-transition .el-table__body td) {
  text-align: center;
  font-size: 12px;
}

.addButton {
  height: 50px;
  display: flex;
  align-items: center;
  padding-left: 20px;
}
</style>
